<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-07-08 14:26:03
 * @LastEditTime: 2022-10-26 20:18:03
 * @FilePath: \vue3\src\components\global\ypthumb\ypthumb.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
    <div v-if="isLoad">
      <div class="w-24 min-h-[90px] bg-gray-300 relative">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-full fill-slate-400" @click="doplay"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 20H20V22H12C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 14.2512 21.2561 16.3287 20.0007 18H17.2916C18.9525 16.5341 20 14.3894 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 10C10.8954 10 10 9.10457 10 8C10 6.89543 10.8954 6 12 6C13.1046 6 14 6.89543 14 8C14 9.10457 13.1046 10 12 10ZM8 14C6.89543 14 6 13.1046 6 12C6 10.8954 6.89543 10 8 10C9.10457 10 10 10.8954 10 12C10 13.1046 9.10457 14 8 14ZM16 14C14.8954 14 14 13.1046 14 12C14 10.8954 14.8954 10 16 10C17.1046 10 18 10.8954 18 12C18 13.1046 17.1046 14 16 14ZM12 18C10.8954 18 10 17.1046 10 16C10 14.8954 10.8954 14 12 14C13.1046 14 14 14.8954 14 16C14 17.1046 13.1046 18 12 18Z"></path></svg>
        <div class="text-xs text-center absolute bottom-0 left-0 right-0 bg-black bg-opacity-40 py-1 text-white cursor-pointer" @click="isUpload=1">{{ myname }}</div>
      </div>
      <div class="absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 z-40" v-if="isUpload">
        <component :is="files" ftype="video"  selnum="1" isopen="1" @useFiles="useFiles"></component>
        <div class="flex justify-center">
          <div class="w-9 h-9 bg-red-500 rounded-full flex justify-center items-center" @click="isUpload=0"><i class="ri-close-line ri-2x text-white"></i></div>
        </div>
      </div>
    </div>
    <teleport to='body'>
        <div class="w-full h-full absolute bg-black z-50 top-0 left-0 select-none" v-if="isplay">
            <ypplayer :url="playurl" @close="isplay=false"></ypplayer>
        </div>
        
    </teleport>
  </template>
  <script setup>
  import { getData } from '@/api/data'
  import { reactive, onMounted, ref } from 'vue'
  import files from '@/pages/files/index'
  const props = defineProps({
    modelValue: {
      default: 0
    },
    mod:{
      default:[]
    }
  })
  const isLoad=ref(false)
  const isplay=ref(false)
  const playurl=ref('')
  const myname=ref('选择视频')
  const isUpload = ref(0)
  const objfile = reactive({ id: 0, src: '' })
  const emit = defineEmits(['update:modelValue'])
  const useFiles = (obj) => {
    objfile.src = obj[0].filepath
    objfile.id = obj[0].id
    isUpload.value = 0
    playurl.value=obj[0].filepath
    emit('update:modelValue', objfile.id)
  }
  const doplay=()=>{
    if(playurl.value){
        isplay.value=true
    }
  }
  onMounted(async () => {
  
    if (props.modelValue) {
      const res = await getData('/files/details', { id: props.modelValue })
      if (res.code) {
        objfile.src = res.data.filepath
        playurl.value=res.data.filepath
        myname.value='换个视频'
      }
    }
    isLoad.value=true
  })
  </script>
  